<template>
  <div class="hb">
    <h3>今日销售</h3>
    <div class="sz">
      <div class="box1" style="backgroundColor: rgba(255, 0, 0, 1)">
        <span>{{ num1 }}</span>
        <p>今日总营收</p>
      </div>
      <div class="box1" style="backgroundColor: rgba(255, 153, 0, 1)">
        <span>{{ num2 }}</span>
        <p>今日优惠金额</p>
      </div>
      <div class="box1" style="backgroundColor: rgba(26, 165, 255, 1)">
        <span>{{ num3 }}</span>
        <p>今日订单数</p>
      </div>
      <div class="box1" style="backgroundColor: rgba(102, 204, 204, 1)">
        <span>{{ num4 }}</span>
        <p>总销售额</p>
      </div>
    </div>
  </div>
</template>

<script>
import { findbyday, findAllmoney } from "@/apis/zhaobaoyi/zhaobaoyi.js";
export default {
  data() {
    return {
      tableData: [],
      num4: 0.0,
    };
  },
  mounted() {
    findbyday().then((ok) => {
      this.tableData = ok.data.data;
    });
    findAllmoney().then((ok) => {
      this.num4 = ok.data.data;
    });
  },
  computed: {
    num1() {
      let num11 = 0;
      for (let i = 0; i < this.tableData.length; i++) {
        num11 +=
          this.tableData[i].orderList.length *
          this.tableData[i].orderList[0].foodMoney *
          this.tableData[i].orderList[0].foodDiscount;
      }
      return num11;
    },
    num2() {
      let num21 = 0;
      for (let i = 0; i < this.tableData.length; i++) {
        num21 +=
          this.tableData[i].orderList.length *
            this.tableData[i].orderList[0].foodMoney -
          this.tableData[i].orderList.length *
            this.tableData[i].orderList[0].foodMoney *
            this.tableData[i].orderList[0].foodDiscount;
      }
      return num21;
    },
    num3() {
      let num31 = 0;
      for (let i = 0; i < this.tableData.length; i++) {
        num31 += this.tableData[i].orderList.length;
      }
      return num31;
    },
  },
};
</script>

<style scoped>
.hb {
  display: flex;
  flex-direction: column;
  border: solid 1px #000;
}
h3 {
  width: 441px;
  height: 45px;
  background-color: rgb(220, 220, 220);
}
.sz {
  display: flex;
  width: 441px;
  height: 311px;
  flex-direction: row;
  flex-wrap: wrap;
}
.box1 {
  display: flex;
  flex-direction: column;
  width: 161px;
  height: 128px;
  margin-left: 37.5px;
  margin-top: 15px;
}
span {
  width: 56px;
  height: 36.8px;
  font-size: 28px;
  margin-left: 54px;
  margin-top: 17px;
  text-align: center;
}
p {
  width: 93px;
  height: 19px;
  font-size: 14px;
  margin-left: 35px;
  margin-top: 15px;
  text-align: center;
}
</style>